import React, { Component } from 'react';
import Divider from 'material-ui/Divider';
import FontIcon from 'material-ui/FontIcon';
import IconMenu from 'material-ui/IconMenu';
import MenuItem from 'material-ui/MenuItem';
import IconButton from 'material-ui/IconButton';
import { grey500 } from 'material-ui/styles/colors';
import { Card, CardMedia, CardText } from 'material-ui/Card';
import MoreVertIcon from 'material-ui/svg-icons/navigation/more-vert';

import { Link } from 'react-router';

import { moment } from '../Utils/Helper';

export default class ShowActivityPanel extends Component {
  render() {
  	return (
  	  <Card className="card-line" style={styles.card}>
        <div style={styles.title}>活动计划</div>

        {this.props.isPublisher ? 
          <IconMenu
            style={styles.more}
            iconButtonElement={<IconButton><MoreVertIcon color={grey500} /></IconButton>}
            anchorOrigin={{horizontal: 'right', vertical: 'top'}}
            targetOrigin={{horizontal: 'right', vertical: 'top'}}
          >
            <MenuItem 
              primaryText="修改本活动" 
              onTouchTap={this.props.handleOpen.bind(this, 'openNewActivity')} 
            />
            <MenuItem 
              primaryText="删除" 
              onTouchTap={this.props.handleOpen.bind(this, 'openDelete')} 
            />
          </IconMenu> : ''
        }

        <CardText>
          <p style={{marginTop: 0}}>
            由
            <b><Link to={`user/${this.props.data.user_id}`}>{this.props.data.user_name}</Link></b>
            确立主题—{this.props.data.theme}
          </p>

          <Divider style={{marginTop: 0}} />

          <p>
            <FontIcon style={styles.icon} className="icon-today" />
            {moment(this.props.data.start_time).format('ll ah:mm')}

            {this.props.data.number_of_people ? 
              <span>{' 限' + this.props.data.number_of_people + '人'}</span> : ''
            }
          </p>

          {this.props.data.end_time ? 
            <p>
              <FontIcon style={styles.icon} className="icon-remove" />
              {moment(this.props.data.end_time).format('ll ah:mm')}
            </p> : ''
          }

          {this.props.data.address ? 
            <p>
              <FontIcon style={styles.icon} className="icon-room" />
              {this.props.data.address}
            </p> : ''
          }

          <p style={{lineHeight: 1.428}}>
            {this.props.data.details || '暂无活动描述'}
          </p>
        </CardText>
      </Card>
  	);
  }
};

const styles = {
  card: {
    position: 'relative',
  },
  title: {
    padding: 16,
    fontSize: 20
  },
  icon: {
    fontSize: 14
  },
  more: {
    position: 'absolute',
    right: 4,
    top: 4,
  }
};